<template>
	<view class="app_index">
		<u-navbar :isFixed="true" title="登录" :borderBottom="false"></u-navbar>
		<image :src="backimg" class="bcimage" mode="scaleToFill"></image>
		<view class="mask">
			<view class="app_welcome">
				<!-- <text class="app_halo">{{welcomeData.title}}</text>
				<text class="app_content">{{welcomeData.content}}</text> -->
				<image src="https://image.malldx.com/11e3b2b6105ec1d31a671d432ea09649.jpg" mode="scaleToFill"></image>
			</view>

			<view class="app_door">
				<view class="button" @click="gologin" v-if="!phone_accredit">微信一键登录</view>
				<button class="button" v-if="phone_accredit" open-type="getPhoneNumber"
					@getphonenumber="getphone">授权手机号</button>
				<!-- <navigator url="/home/login/phonelogin" v-model="codes" hover-class="none" class="phone_login">手机验证登录</navigator> -->
				<view class="app_reading">
					登录即表示您已阅读并同意
					<text @click="readingo('用户协议',1)">《用户协议》</text>和
					<text @click="readingo('隐私协议',2)">《隐私协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import md5 from "../../static/js/md5.js"
	export default {
		data() {
			return {
				welcomeData: {
					title: '您好',
					content: '欢迎使用古树之道'
				},
				mobile: '',
				codes: '',
				backimg: "",
				phone_accredit: false,
				token: "",
				session_key: "",
				openid: "",
				client_uid: "",
				result: [],
				mathstr: "",
				unionid: "",
				loginWxParams: {},

				time: new Date().getTime()
			}

		},
		onLoad() {
			// 防止多次跳入登录
			setTimeout(function() {
				uni.setStorageSync("gologin", false)
			}, 2000);
			_this = this
			_this.getdata()
			_this.$plug.isonshow(2)
		},
		methods: {
			// 获取数据
			getdata() {
				_this.$api.get("loginback", {}).then(data => {
					_this.backimg = data
				});
			},
			readingo: function(name, type) {
				uni.navigateTo({
					url: "/home/login/reading?name=" + name + "&type=" + type
				})
			},

			tobingding: function() {
				uni.navigateTo({
					url: "/home/login/bingding"
				})
			},
			//随机字符串
			getStr(length) {
				let str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
				let result = '';
				for (let i = length; i > 0; --i)
					result += str[Math.floor(Math.random() * str.length)];

				_this.mathstr = result
				_this.result.push(result);
			},

			gologin() {
				// wx登录
				wx.getUserProfile({
					desc: '用于完善会员资料',
					success: function(res) {
						let UserProfile = res;
						let code = "";
						uni.showLoading({
							title: '登陆中…' ,
							mask: true
						})
						wx.login({
							success(res) {
								if (res.code) {
									code = res.code
									_this.$api.post("wechatreg", {
										iv: decodeURIComponent(UserProfile.iv),
										encryptedData:decodeURIComponent(UserProfile.encryptedData),
										js_code: code,
									}).then(data => {
										uni.hideLoading()
										console.log(data)
										_this.getStr(8)
										_this.result.push(_this.time)
										_this.result.push(data.token);
										_this.result = _this.result.sort().join('')
										let str = md5.hex_md5(_this.result)
										let md5str = str.toUpperCase()

										uni.setStorageSync("t", _this.time)
										uni.setStorageSync("r", _this.mathstr)
										uni.setStorageSync("s", md5str)
										uni.setStorageSync("user", UserProfile.userInfo)
										if (data.mobile && data.mobile != 0) {
											uni.setStorageSync("client_uid", data.client_uid)
											uni.setStorageSync("token", data.token)
											// 返回店铺详情就刷新店铺页面
											uni.setStorageSync("refresh", "1")
											uni.showToast({
												title: "登录成功",
												icon: "success"
											})
											wx.navigateBack({
												delta: 1
											})
										} else {
											uni.showToast({
												title: "请授权手机号",
												icon: "none"
											})
											_this.phone_accredit = true
											// _this.session_key = data.session_key
											// _this.openid = data.openid
											// _this.client_uid = data.client_uid
											// _this.unionid = data.unionid
											_this.loginWxParams = {...data}
										}
									}).catch(err => {
										console.error(err && JSON.stringify(err));
										uni.showToast({
											title: "授权失败！",
											icon: "error"
										})
									});
								}
							}
						})
					}
				})
			},
			// 授权手机号
			getphone(e) {
				let _this = this
				wx.login({
					success: code => {
						if (e.detail.errMsg == "getPhoneNumber:ok") {
							let params = {
								..._this.loginWxParams,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
								unionId: _this.loginWxParams.unionid,
							}
							// Object.keys(params).forEach(key => if (!params[key]) delete params[key])
							uni.showLoading({
								title: '授权中…' ,
								mask: true
							})
							_this.$api.post('wechatphone', params).then(data => {
								_this.client_uid = data.client_uid
								_this.token = data.token
								_this.phone_accredit = true
								uni.setStorageSync("client_uid", _this.client_uid)
								uni.setStorageSync("token", data.token)
								// 返回店铺详情就刷新店铺页面
								uni.setStorageSync("refresh", "1")
								uni.showToast({
									title: "登录成功",
									icon: "success"
								})
								wx.navigateBack({
									delta: 1
								})
							}).catch(err => {
								uni.showToast({
									title: "登录失败",
									icon: "error"
								})
							})
						}
					}
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.app_index {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;

		.bcimage {
			width: 100%;
			height: 100%;
			z-index: -1;
			position: absolute;
			left: 0;
		}

		.mask {
			width: 100%;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			background-color: rgba($color: #000000, $alpha: 0.5);

			.app_welcome {
				margin-top: 60%;
				padding: 0 200rpx;
				display: flex;
				flex-direction: column;

				.app_halo {
					font-size: 70rpx;
					color: #fff;
					font-weight: bold;
				}

				.app_content {
					font-size: 40rpx;
					color: #fff;
					margin-top: 40rpx;
				}

				image {
					width: 350rpx;
					height: 350rpx;
				}
			}

			.app_door {
				width: 100%;
				padding: 200rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: absolute;
				bottom: 0;

				.button {
					width: 446rpx; 
					margin: 0 auto;
					background: #38be8c;
					border-radius: 39px;
					line-height: 78rpx;
					color: #FFFFFF;
					font-size: 30rpx;
					font-weight: bold;
					text-align: center;
				}

				.phone_login {
					margin-top: 53rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #38be8c;
				}

				.app_reading {
					margin-top: 40rpx;
					font-size: 24rpx;
					color: #d5d5d5;

					text {
						color: rgb(56, 190, 140);
					}
				}
			}
		}
	}
</style>
